<template>
  <view class="vh-100 d-flex flex-column" style="background-color: #f2f2f2">
    <StatusBar></StatusBar>
    <HeaderComponent title="常见问题" class="w-100" style="width: 10%"></HeaderComponent>
    <view class="m-3 bg-white p-2">
      <input placeholder="请输入关键字搜索" type="text" v-model="search">
    </view>
    <scroll-view scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower"
                 :refresher-enabled="true" class="flex-grow-1 overflow-scroll">
      <view class="bg-white">
        <view v-for="(item,index) in list" :key="index" @click="goto(item.link)"
              class="mx-3 my-2 d-flex justify-content-between align-items-center"
              style="border-bottom: 0.1rem solid #e8e8e8">
          <view class="my-2">{{ item.title }}</view>
          <image src="/static/img/右箭头.svg" class="ms-1" style="width: 1rem;height: 1rem"></image>
        </view>
        <view v-if="loading" class="text-center p-3">加载中...</view>
      </view>
    </scroll-view>
    <view class="w-100 my-4 d-flex justify-content-center align-items-center text-secondary">
      <AttentionWx></AttentionWx>
    </view>
  </view>
</template>

<script>
import HeaderComponent from "../../common/HeaderComponent.vue";
import StatusBar from "../../common/StatusBar.vue";
import AttentionWx from "../../common/AttentionWx.vue";

export default {
  components: {
    AttentionWx,
    StatusBar,
    HeaderComponent
  },
  data() {
    return {
      search: "",
      list: [], // 存储列表数据
      loading: false, // 加载状态
      page: {
        current: 1,
        pageSize: 10, // 每页加载的数据数量
        data: []
      }
    };
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
    async loadData(queryData) {
      if (this.loading) return;
      this.loading = true;
      let res = await this.mockGetdata(queryData);
      await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟等待1秒
      if (res.code === 1) {
        let page = res.data
        if (page?.data?.length > 0) {
          this.page = page;
          this.list = this.list.concat(page.data)
        }
      }
      this.loading = false;
    },
    async mockGetdata(page) {
      let data = []
      for (let i = 0; i < page.pageSize; i++) {
        data.push({
          title: '开户视频无法链接怎么办?',
          link: '/pages/start/answer/answer'
        })
      }
      page.data = data
      return {
        code: 1,
        data: page
      }
    },
    // 滚动到底部触发
    async onScrollToLower() {
      let params = {
        current: this.page.current + 1,
        pageSize: this.page.pageSize,
        search: this.search,
      }
      await this.loadData(params);
    },
  },
  mounted() {
    // 页面加载时初次获取数据
    this.loadData(this.page);
  },
};
</script>
<style scoped>
</style>
